<template>
  <div class="gallary" @click="handlerGallarClose">
    <van-swipe @change="onChange" class="my-swipe" :show-indicators="false">
      <van-swipe-item v-for="(item, idx) in imgs" :key="idx"
        ><img :src="item" alt=""
      /></van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{this.imgs.length}}</div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: 'GallaryPage',
  props: {
    imgs: {
      type: Array,
      default () {}
    }
  },
  data () {
    return {
      total: 4,
      number: 1,
      current: 0
    }
  },
  methods: {
    onChange (index) {
      this.current = index
    },
    handlerGallarClose () {
      this.$emit('gallarClose')
    }
  }
}
</script>

<style lang="scss" >
.gallary {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #000;
  .van-swipe {
    overflow: inherit;
    .van-swipe-item {
      img {
        width: 100%;
        height: 70%;
      }
    }
    .custom-indicator {
      position: absolute;
      right: 0px;
      left: 0;
      margin: 0 auto;
      text-align: center;
      bottom: -100px;
      padding: 2px 5px;
      font-size: 26px;
      color: #fff;
    }
  }
}
</style>
